<template>
  <div class="app-mine _main_y">
    <div class="header-box _align_center _justify_between">
      <div v-show="showHeaderLoginBox" class="login-box _align_center">
        <a href class="headPortrait">
          <img
            class
            src="https://res.vmallres.com/nwap/20190215/staticm/img/personal/defaultface_user_after.png"
            alt
          >
        </a>
        <a v-if="accountNumber" class="login accountNumber">{{accountNumber}}</a>
        <a v-else href="/login" class="login">登录/注册</a>
      </div>
      <a href class="messge-box _bgimg_content" style="background-image:url(./images/message.png)">
        <i></i>
      </a>
    </div>
    <div class="content " ref="wrapper">
      <div class="wrapper _content_y">
        <div class="userMsg _flex_x">
          <a href class="img">
            <img src="https://res.vmallres.com/nwap/20190215/staticm/img/personal/defaultface_user_after.png" alt>
          </a>
          <div class="msg _flex_y">
            <a  v-if="accountNumber" class="login accountNumber" >{{accountNumber}}</a>
            <a v-else href="/login" class="login">登录/注册</a>
            <a href="" class="sign _flex_x"><i style="background-image:url(./images/sign.png)"></i> 签到领积分</a>
          </div>
        </div>
        <div class="my-property ">
          <ul class="_flex_x">
            <li>
              <a href="">
                <span class="num">-</span>
                <span class="type">积分</span>
              </a>
            </li>
            <li>
              <a href="">
                <span class="num">-</span>
                <span class="type">优惠券</span>
              </a>
            </li>
            <li>
              <a href="">
                <span class="num">-</span>
                <span class="type">代金券</span>
              </a>
            </li>
          </ul>
        </div>
        <!-- 用户页面各类操作 -->
        <section class="order-box section-box">
          <header class="order-header">
            <a class="_justify_between _align_center" href="">
              <span class="item-name">我的订单</span>
              <span class="all-item" style="background-image:url(./images/arrow_right.png)">全部订单</span>
            </a>
          </header>
          <ul class="order-contain section-contain _flex_x" >
            <li>
              <a href="">
                <i style="background-image:url(./images/orderNav.png)"></i>
                <span>待付款</span>
              </a>
            </li>
            <li>
              <a href="">
                <i style="background-image:url(./images/orderNav.png)"></i>
                <span>待收货</span>
              </a>
            </li>
            <li>
              <a href="">
                <i style="background-image:url(./images/orderNav.png)"></i>
                <span>待评价</span>
              </a>
            </li>
            <li>
              <a href="">
                <i style="background-image:url(./images/orderNav.png)"></i>
                <span>退换货</span>
              </a>
            </li>
            <li>
              <a href="">
                <i style="background-image:url(./images/orderNav.png)"></i>
                <span>回收单</span>
              </a>
            </li>
          </ul>
        </section>
        <section class="section-box">
          <header class="member-header">
            <a  class="_justify_between _align_center" href="">
              <span class="item-name">会员专享</span>
              <span class="all-item" style="background-image:url(./images/arrow_right.png)">更多会员权益</span>
            </a>
          </header>
          <div class="swiper-container mine-page-swiper">
              <div class="swiper-wrapper ">
                  <div class="swiper-slide _flex_x" style="background-image:url(./images/vip_1.455bad2.png)">
                      <div class="contain _flex_y _justify_center">
                        <div class="price">
                          <i>￥</i>
                          <span>100</span>
                        </div>
                        <p>
                          【礼券】 荣耀手机 100元优惠券
                        </p>
                      </div>
                      <span class="button">
                        领取
                      </span>
                  </div>
                  <div class="swiper-slide _flex_x" style="background-image:url(./images/vip_1.455bad2.png)">
                      <div class="contain _flex_y _justify_center">
                        <div class="price">
                          <i>￥</i>
                          <span>10</span>
                        </div>
                        <p>
                          
              
                  【华为】配件10元优惠券
                
                
                        </p>
                      </div>
                      <span class="button">
                        领取
                      </span>
                  </div>
                  <div class="swiper-slide _flex_x" style="background-image:url(./images/vip_1.455bad2.png)">
                      <div class="contain _flex_y _justify_center">
                        <div class="price">
                          <i>￥</i>
                          <span>200</span>
                        </div>
                        <p>
                          
                  【华为】200元秒杀券
                
                        </p>
                      </div>
                      <span class="button">
                        领取
                      </span>
                  </div>
                  <div class="swiper-slide _flex_x" style="background-image:url(./images/vip_1.455bad2.png)">
                      <div class="contain _flex_y _justify_center">
                        <div class="price">
                          <i>￥</i>
                          <span>50</span>
                        </div>
                        <p>
                          
                  【礼券】 荣耀畅玩7 50元优惠券
                
                        </p>
                      </div>
                      <span class="button">
                        领取
                      </span>
                  </div>
              </div>
          </div>
        </section>
        <hr>
        <p>--------------------------以下是重复代码，待数据修订-------------------------</p>
         <section class="order-box section-box">
          <header class="order-header">
            <a class="_justify_between _align_center" href="">
              <span class="item-name">我的订单</span>
              <span class="all-item" style="background-image:url(./images/arrow_right.png)">全部订单</span>
            </a>
          </header>
          <ul class="order-contain section-contain _flex_x" >
            <li>
              <a href="">
                <i style="background-image:url(./images/orderNav.png)"></i>
                <span>待付款</span>
              </a>
            </li>
            <li>
              <a href="">
                <i style="background-image:url(./images/orderNav.png)"></i>
                <span>待收货</span>
              </a>
            </li>
            <li>
              <a href="">
                <i style="background-image:url(./images/orderNav.png)"></i>
                <span>待评价</span>
              </a>
            </li>
            <li>
              <a href="">
                <i style="background-image:url(./images/orderNav.png)"></i>
                <span>退换货</span>
              </a>
            </li>
            <li>
              <a href="">
                <i style="background-image:url(./images/orderNav.png)"></i>
                <span>回收单</span>
              </a>
            </li>
          </ul>
        </section>
         <section class="order-box section-box">
          <header class="order-header">
            <a class="_justify_between _align_center" href="">
              <span class="item-name">我的订单</span>
              <span class="all-item" style="background-image:url(./images/arrow_right.png)">全部订单</span>
            </a>
          </header>
          <ul class="order-contain section-contain _flex_x" >
            <li>
              <a href="">
                <i style="background-image:url(./images/orderNav.png)"></i>
                <span>待付款</span>
              </a>
            </li>
            <li>
              <a href="">
                <i style="background-image:url(./images/orderNav.png)"></i>
                <span>待收货</span>
              </a>
            </li>
            <li>
              <a href="">
                <i style="background-image:url(./images/orderNav.png)"></i>
                <span>待评价</span>
              </a>
            </li>
            <li>
              <a href="">
                <i style="background-image:url(./images/orderNav.png)"></i>
                <span>退换货</span>
              </a>
            </li>
            <li>
              <a href="">
                <i style="background-image:url(./images/orderNav.png)"></i>
                <span>回收单</span>
              </a>
            </li>
          </ul>
        </section>
        <PageBottomContent/>
        <!-- 用户页面各类操作 -->
      </div>
    </div>
    <TabBar></TabBar>
  </div>
</template>
<script>
import PageBottomContent from 'common/PageBottomContent';
import scroll from 'utils/scroll';

export default {
  components:{
    PageBottomContent
  },
  data(){
    return{
      showHeaderLoginBox:false,
      accountNumber:''
    }
  },
  beforeCreate(){
    setTimeout(function(){
        let mySwiper = new Swiper('.mine-page-swiper', {
            slidesPerView:'auto'
        })
    },0)
  },
  created() {
    //获取本地存储中已登录的账号
    let loginDidUser=localStorage.loginDidUser
    if(loginDidUser) {
      loginDidUser=JSON.parse(loginDidUser)
      this.accountNumber=loginDidUser.accountNumber.replace(loginDidUser.accountNumber.slice(3,7),'****');
    }
  },
  async mounted() {
      await scroll(this,'wrapper')
      this.wrapper.on('scroll',()=>{
        if(this.wrapper.y<-150){
          this.showHeaderLoginBox=true
        }else{
          this.showHeaderLoginBox=false
        }
      })
  }
};
</script>

<style lang="stylus" scoped>
.app-mine
  .header-box
    width 100%
    height 0.47rem
    position fixed
    background #e41f2b
    z-index 9999
    .login-box
      .headPortrait
        width 0.31rem
        height 0.31rem
        margin 0 0.1rem 0 0.19rem
        img
          width 0.31rem
          height 0.31rem
      .login
        height 0.19rem
        color #fff
        font-size 0.17rem
    .messge-box
      width 0.25rem
      height 0.25rem
      padding 0.08rem 0.1rem
      right 0.06rem
      position absolute
  .content
    background #eee
    height 100%
    margin .47rem 0 .52rem
    overflow hidden
    .wrapper
      margin .47rem 0 .52rem
      .userMsg
        background #e41f2b
        height .63rem
        padding-bottom .8rem
        border-radius 0 0 50% 50%/0 0 .3rem .3rem
        .img
          width .62rem 
          height .62rem
          margin-left .19rem
          img 
            width 100%
            height 100%
        .msg
          height .53rem
          margin-left .1rem
          a
            color #fff
            &.login 
              height .26rem
              line-height .3rem
              font-size .2rem
              margin-bottom .1rem
            &.sign
              i 
                width .15rem
                height .15rem
                display flex
                margin-right .02rem
                background-size 100%
              font-size .1rem
              width .8rem
              height .14rem
              line-height .16rem
              margin-top .12em
              padding .03rem .06rem 
              background-color rgba(0, 0, 0, 0.1)
              border-radius .10rem
      .my-property   
        background #fff
        height .71rem
        padding 0 .1rem 
        margin -0.4rem .1rem .1rem
        border-radius .1rem
        box-shadow 0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.1)
        ._flex_x
          height .41rem
          padding .15rem 0
          li
            flex 1
            text-align center
            a
              display flex
              flex-direction column
              height 100%
              justify-content space-around
              .num
                color #444
              .type
                color #666
      section 
        background #fff
        border-radius .1rem
        padding 0 .1rem 
        padding-bottom .05rem
        margin 0 .1rem .1rem
        &.section-box
          header
              height .42rem
            a 
              height 100%
              .item-name
                font-size .15rem
                font-weight 900
                color #333
              .all-item
                padding-right .11rem
                color #666666
                background-size auto 100%
                background-repeat no-repeat
                background-position right center
          .swiper-container
              .swiper-slide 
                  width 1.63rem
                  height .93rem
                  padding .08rem .03rem
                  background-size 100%
                  .contain
                    background-color rgba(0,0,0,0.03) 
                    height 100%
                    width 1.21rem
                    border-radius .1rem
                    .price 
                      height .41rem
                      color #ca141d
                      font-family "Arial, Helvetica, sans-serif"
                      i 
                        font-size .15rem
                        font-weight 900
                        margin-right .05rem
                      span
                        font-weight 900
                        font-size .3rem
                    p  
                      width 1rem
                      height .31rem
                      line-height .15rem
                      color #666
                  .button 
                    text-align center
                    line-height .93rem
                    width .35rem
                    color #ffffff
          .section-contain
            &.order-contain
              height .61rem
            li 
              height 100%
              flex 1
              a
                height 100%
                display flex
                flex-direction  column
                justify-content space-between 
                align-items center
                text-align center
                i   
                  width .42rem
                  height .42rem
                  background-size 100% auto
                span 
                  height .15rem
                  color #666
            li:nth-of-type(2) i
              background-position-y -100%
            li:nth-of-type(3) i
              background-position-y -200%
            li:nth-of-type(4) i
              background-position-y -300%
            li:nth-of-type(5) i
              background-position-y -400%

</style>
